<template>
    <div class="main">
        <div class="banner">
        </div>
        <div class="productList" @scroll="scrollUpdata" ref="contaniner">
            <div class="item" v-for="(item, index) in  listData" :key="index">
                <!-- me is item {{ index >= 8 ? index - 7 : '' }} -->
                <div class="photo-box">
                    <img :src="UserStore.ing + item.sellerPic" alt="">
                </div>
                <h3 class="title">{{ item.itemCommodityName }}</h3>
                <p class="desc">If the Show objects under schema</p>
                <div class="price"><span>pi</span> <span>{{ item.price }}</span></div>
            </div>

        </div>
    </div>
</template>
<script setup>
import { ref, computed, onMounted, reactive } from 'vue';
import { showLoadingToast, closeToast } from 'vant';
import { collectList } from '@/server/api/profile'
import { useUseStore } from '@/stores/user';
const UserStore = useUseStore();

const listData = ref([]);
const contaniner = ref(null);
const param = reactive({
    pages: 1,
    limit: 6,
    userId: 'wzx'
});
const getListData = async () => {

    try {
        const res = await collectList(param)
        console.log(res);
        listData.value = res.data.data.list;
    } catch (e) {
        console.log("e:", e);
    }
}
const isRequire = ref(true);
const ScrollData = async () => {
    const res = await collectList(param);
    console.log(res.data.data.list);
    // listData.value.push(...res.data.data.list);
    listData.value = listData.value.concat(res.data.data.list)
    isRequire.value = true;
    closeToast();

}
onMounted(() => {
    getListData();


})
let count = ref(1);
const scrollUpdata = () => {
    const scrollTop = contaniner.value.scrollTop;
    const scrollHeight = contaniner.value.scrollHeight;
    const clientHeight = contaniner.value.clientHeight;
    // console.log("scrollTop:", scrollTop);
    // console.log("scrollHeight:", scrollHeight);
    // console.log("clientHeight:", clientHeight);
    if ((scrollTop + clientHeight + 5 >= scrollHeight) && isRequire.value) {
        console.log("到底啦");
        param.pages = 2;
        isRequire.value = false;
        count.value++;
        ScrollData();
        showLoadingToast({
            message: '加载中...',
            forbidClick: true,
        });


    }
}

</script>
<style lang="scss" scoped>
.banner {
    width: 390rem;
    height: 250rem;
    background-color: #5986e9;
}

.productList {
    height: calc(100vh - 250rem);
    overflow-y: scroll;
    padding-top: 20rem;
    display: flex;
    flex-wrap: wrap;
    background-color: #999;

    .item {
        width: 50vw;

        // display: flex;
        // align-items: center;
        // display: flex;
        // flex-direction: column;
        margin-bottom: 10rem;
        padding: 6rem 10rem;
        box-sizing: border-box;

        img {
            position: relative;
            width: 100%;
        }

        .title {
            margin-top: 10rem;
            font-size: 20rem;
            text-align: left;
        }

        .desc {
            font-size: 14rem;
        }

        .price {
            text-align: left;
            font-size: 14rem;
            height: 16rem;
            line-height: 16rem;
        }

    }
}
</style>